<template>
  <van-nav-bar left-arrow @click-left="onClickLeft">
    <template #title>
      <div @click="openResult">
        <search-bar style="height: 9vw" :start-date="'09.19'" :end-date="'09.20'">
          <template #left>
            <div class="currentCity">
              {{ $route.query.currentCity }}
            </div>
          </template>
        </search-bar>
      </div>
    </template>
  </van-nav-bar>
  <van-dropdown-menu>
    <template v-for="item in topList" :key="item.label">
      <van-dropdown-item
        v-if="item.label !== '排序'"
        :title="item.label"
        ref="item"
      >
        <van-tree-select
          v-model:active-id="item.value"
          v-model:main-active-index="item.activeIndex"
          :items="getChildren(item.subGroups)"
        />
      </van-dropdown-item>
      <van-dropdown-item
        v-else
        :title="item.label"
        v-model="item.value"
        :options="getChildrens(item.items)"
      />
    </template>
  </van-dropdown-menu>
  <div class="search">
    <!-- <h2>开始时间: {{ $route.query.startDate }}</h2>
    <h2>结束时间: {{ $route.query.endDate }}</h2>
    <h2>当前城市: {{ $route.query.currentCity }}</h2> -->
    <search-categories></search-categories>
    <item-card :favorlist="resultList"></item-card>
  </div>
</template>

<script setup>
import useSearchStore from "@/stores/modules/search";
import { storeToRefs } from "pinia";
import ItemCrad from "@/components/item-card/item-card.vue";
import searchCategories from "./cpns/search-categories.vue";
import { useRouter } from "vue-router";

const router = useRouter();
const onClickLeft = () => {
  router.push("/home");
};

const openResult = ()=>{
  router.push("/result");
}

const searchStore = useSearchStore();
searchStore.fetchSearchTop();
searchStore.fetchSearchResult();
const { topList, resultList } = storeToRefs(searchStore);

const getChildren = (arr) => {
  return arr.map((item) => {
    const obj = {
      ...item,
      text: item.label,
      children: item.items.length
        ? [...item.items].map((i) => {
            return {
              ...i,
              text: i.label,
              id:i.value
            };
          })
        : [...item.subGroups].map((i) => {
            return {
              ...i,
              text: i.label,
              id: i.conditionType,
            };
          }),
    };
    return obj;
  });
};
const getChildrens = (arr) => {
  return arr.map((item) => {
    return {
      ...item,
      text: item.label,
    };
  });
};

</script>

<style lang="less" scoped>
.currentCity {
  margin-right: 5px;
  padding-right: 5px;
  border-right: 1px solid #fff;
}
:deep(.van-nav-bar__title) {
  max-width: 75%;
}
</style>
